<template>
  <div id="app">
    <div class="header">
      <div>
        <ul class="tile-block">
          <li class="label">衣服总数</li>
          <li class="number" style="color: #32cbff">{{ total }}</li>
        </ul>
      </div>
      <div>
        <ul class="tile-block">
          <li class="label">正常</li>
          <li class="number" style="color: #2ac94f">{{ normal }}</li>
        </ul>
      </div>
      <div>
        <ul class="tile-block">
          <li class="label">报警</li>
          <li class="number" style="color: #f84439">{{ alarm }}</li>
        </ul>
      </div>
    </div>
      <div class="check-group">
          <button class="check-class" @click="check">巡检</button>
          <button class="check-class" @click="clearAlarm">清除报警</button>
      </div>
    <div id="map" class="container"></div>
      <audio id="audio" :src="require('@/assets/alarm.wav')" loop></audio>
  </div>
</template>

<script>
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
import jackets from "@/assets/data.json";
import PopWindow from "@/components/PopWindow.vue";
import Vue from "vue";

export default {
  name: "App",
  data() {
    return {
      total: 0,
      normal: 0,
      alarm: 0,
    };
  },
  components: {},
  mounted() {
    this.createMap();
    this.initData();
  },
  methods: {
    createMap: function () {
      window.map = new maptalks.Map("map", {
        center: [120.187213, 30.1976998],
        zoom: 11,
        minZoom: 1,
        maxZoom: 18,
        spatialReference: {
          projection: "EPSG:4326",
        },
        zoomControl: true, // add zoom control
        baseLayer: new maptalks.TileLayer("base", {
          tileSystem: [1, -1, -180, 90],
          urlTemplate:
            "https://t{s}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d5cbd0c27896bb8f535dc57ecef2718c",
          subdomains: ["1", "2", "3", "4", "5"],
        }),
        layers: [
          new maptalks.TileLayer("label", {
            tileSystem: [1, -1, -180, 90],
            urlTemplate:
              "https://t{s}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d5cbd0c27896bb8f535dc57ecef2718c",
            subdomains: ["1", "2", "3", "4", "5"],
          }),
        ],
      });
    },
    initData: function () {
      window.markers = [];
      console.info("jackets", jackets);
      this.total = jackets.length;
      this.normal = jackets.length;
      // const layer = new maptalks.VectorLayer("vector").addTo(window.map);
      for (let key in jackets) {
        let jk = jackets[key];
        let dom = document.createElement("div");
        dom.innerHTML = `<img src="${require(`./assets/${jk.当前状态}.svg`)}">`;
        let marker = new maptalks.ui.UIMarker([jk.经度, jk.纬度], {
          content: dom,
        }).addTo(window.map);
        marker.properties = { ...jk };
        // let marker = new maptalks.ui.UIMarker([jk.经度, jk.纬度], {
        //   content: dom,
        //   properties: { ...jk },
        // }).addTo(layer);

        marker.on("click", (e) => {
          if (window.infoWindow) {
            window.infoWindow.remove();
          }
          let subPopup = Vue.extend(PopWindow);
          let popContent = new subPopup({
            propsData: {
              properties: { ...jk },
            },
          });
          console.info(e);
          // marker.setInfoWindow({ content: popContent.$mount().$el });
          // marker.openInfoWindow();
          window.infoWindow = new maptalks.ui.InfoWindow({
            content: popContent.$mount().$el,
            autoOpenOn: false
          });
          window.infoWindow.addTo(window.map).show(marker._coordinate);
        });
        window.markers.push(marker);
      }
    },
    check() {
      this.alarm = 1;
      this.normal = this.total - this.alarm;
        let audio = document.getElementById("audio");
        audio.play();
      window.markers.forEach((marker) => {
        if (marker.properties.衣服ID == "AIJSY00006") {
          marker.properties.当前状态 = "报警";
          marker.setContent(`<img src="${require(`./assets/报警.svg`)}">`);
        }
      });
    },
      clearAlarm(){
          this.alarm = 0;
          this.normal = this.total - this.alarm;
          let audio = document.getElementById("audio");
          audio.pause();
          window.markers.forEach((marker) => {
              if (marker.properties.衣服ID == "AIJSY00006") {
                  marker.properties.当前状态 = "正常";
                  marker.setContent(`<img src="${require(`./assets/正常.svg`)}">`);
              }
          });
      },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
}

html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.header {
  /* 总数统计 */
  z-index: 99;
  position: absolute;
  left: 0px;
  //top: 84px; width: 100%; height: 79px; opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 40px;

  background: radial-gradient(
      49% 55% at 50% 0%,
      rgba(0, 126, 255, 0.35) 0%,
      rgba(0, 126, 255, 0.095) 47%,
      rgba(0, 126, 255, 0) 84%
    ),
    radial-gradient(
      54% 50% at 50% 100%,
      rgba(0, 126, 255, 0.6) 0%,
      rgba(0, 48, 97, 0) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 48, 97, 0) 0%,
      rgba(0, 31, 62, 0.95) 27%,
      rgba(0, 18, 36, 0.95) 50%,
      rgba(0, 31, 62, 0.95) 73%,
      rgba(0, 48, 97, 0) 99%
    );

  box-sizing: border-box;
  border-width: 1px 0px 1px 0px;
  border-style: solid;
  border-image: linear-gradient(
      270deg,
      rgba(52, 164, 255, 0) 0%,
      rgba(52, 164, 255, 0.6761) 32%,
      #34a4ff 48%,
      rgba(52, 164, 255, 0) 100%
    )
    1 0 1 0;
}

.maptalks-zoom {
  top: 200px;
  position: absolute;
}
.maptalks-msgContent {
  text-align: left;
}
.tile-block {
  padding-left: 0px;
  width: 80px;
}

.label {
  font-family: Source Han Serif CN;
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0px;

  color: #ffffff;
  list-style: none;
}

.number {
  font-family: Oswald;
  font-size: 28px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0px;
  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
  list-style: none;
}

.tk-button {
  right: 10px;
  bottom: 10px;
}
.check-group{
    position: absolute;
    right: 10px;
    bottom: 20px;
    z-index: 999;
}
.check-class {
  width: 80px;
  margin-left: 5px;
}
</style>
